<div class="dynamic-list-container">
  <div class="dynamic-list">
    <div class="page-header">
      <div class="left-section">
        <h2 class="page-heading">图书目录</h2>

       <app-key-strategy-display [keyStrategy]="keyType"></app-key-strategy-display>
      </div>
      <div class="flex items-center gap-2">
        <button nz-button nzType="primary" (click)="sortBooks()">打乱顺序</button>
        <button nz-button nzType="primary" (click)="insertRandomBook()">插入随机图书</button>
        <button nz-button nzType="primary" (click)="deleteRandomBook()">删除随机图书</button>
        <button nz-button nzType="primary" (click)="replaceAllBooks()">替换所有图书</button>
      </div>
    </div>
  </div>

  <div class="description">
    <nz-alert nzType="info" nzMessage="模块说明"
      nzDescription="库存管理系统用于实时跟踪图书馆图书的库存变化。支持入库、出库、调拨等操作，采用Vue.js Key绑定策略优化动态数据更新的性能表现。"
      [nzShowIcon]="true"></nz-alert>
  </div>

  <div class="status-summary">
    <nz-row [nzGutter]="20">
      <nz-col [nzSpan]="6">
        <div class="status-card">
          <div class="status-icon total">
            <i nz-icon nzType="read" nzTheme="outline"></i>
          </div>
          <div class="status-info">
            <h3>{{ books.length }}</h3>
            <p>总图书数</p>
          </div>
        </div>
      </nz-col>
      <nz-col [nzSpan]="6">
        <div class="status-card">
          <div class="status-icon operations">
            <i nz-icon nzType="sync" nzTheme="outline"></i>
          </div>
          <div class="status-info">
            <h3>{{ totalOperations }}</h3>
            <p>操作次数</p>
          </div>
        </div>
      </nz-col>
      <nz-col [nzSpan]="6">
        <div class="status-card">
          <div class="status-icon stock">
            <i nz-icon nzType="box-plot" nzTheme="outline"></i>
          </div>
          <div class="status-info">
            <h3>{{ totalStock }}</h3>
            <p>总库存</p>
          </div>
        </div>
      </nz-col>
      <nz-col [nzSpan]="6">
        <div class="status-card">
          <div class="status-icon time">
            <i nz-icon nzType="clock-circle" nzTheme="outline"></i>
          </div>
          <div class="status-info">
            <h3>{{ lastOperationTime }}ms</h3>
            <p>最后操作耗时</p>
          </div>
        </div>
      </nz-col>
    </nz-row>
  </div>

  <div class="control-panel">


    <h2 style="margin: 8px 0;">快速操作</h2>
    <div class="btn-group">
      <button nz-button nzType="primary" (click)="addBook()" [nzLoading]="loading">
        <i nz-icon nzType="plus"></i> 入库图书
      </button>
      <button nz-button nzType="primary" (click)="initStock()" [nzLoading]="loading">
        <i nz-icon nzType="redo"></i> 初始化库存
      </button>
      <button nz-button nzType="primary" (click)="clearStock()" [nzLoading]="loading">
        <i nz-icon nzType="delete"></i> 清空库存
      </button>
    </div>
    <h2 style="margin: 8px 0;">性能测试操作</h2>
    <div class="btn-group" style="margin-top: 10px; ">
      <button nz-button [nzType]="keyType === 'id' ? 'primary' : 'default'"
        (click)="toggleKeyType('id')">ID作为Key</button>
      <button nz-button [nzType]="keyType === 'index' ? 'primary' : 'default'"
        (click)="toggleKeyType('index')">Index作为Key</button>
      <button nz-button [nzType]="keyType === 'none' ? 'primary' : 'default'"
        (click)="toggleKeyType('none')">无Key</button>
      <button nz-button nzType="primary" (click)="generateAcademicBooks(1000)">生成1000项</button>
      <button nz-button nzType="primary" (click)="insertRandomAcademicBook()">插入元素</button>
      <button nz-button nzType="primary" (click)="deleteRandomAcademicBook()">删除元素</button>
      <button nz-button nzType="primary" (click)="shuffleAcademicBooks()">打乱顺序</button>
      <button nz-button nzType="primary" (click)="replaceAllAcademicBooks()">替换所有</button>
      <button nz-button nzType="primary" (click)="appendToEndAcademicBook()">尾部追加</button>
      <button nz-button nzType="primary" (click)="insertToMiddleAcademicBook()">中间插入</button>
      <button nz-button nzType="primary" (click)="partialUpdateAcademicBook()">局部更新</button>
      <button nz-button nzType="primary" (click)="autoTestReuse()">自动测试复用（单次）</button>
      <button nz-button nzType="primary" (click)="autoTestBatchAndExportExcel()">批量测试并导出Excel</button>
      <button nz-button nzType="primary" (click)="exportReuseStatsToExcel()">导出Excel（当前）</button>
    </div>
  </div>


  <div class="performance-metrics" style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px;">
    <h3 style="margin: 0 0 10px 0; color: #409EFF;">性能指标</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
      <div class="metric-item">
        <span class="metric-label">渲染时间：</span>
        <span class="metric-value" style="color: #e67e22; font-weight: bold;">{{ renderTime || '0' }} ms</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM创建数：</span>
        <span class="metric-value" style="color: #409EFF;">{{ domTrackStats.created || 0 }}</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM复用数：</span>
        <span class="metric-value" style="color: #67C23A;">{{ domTrackStats.reused || 0 }}</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM销毁数：</span>
        <span class="metric-value" style="color: #F56C6C;">{{ domTrackStats.destroyed || 0 }}</span>
      </div>
      <div class="metric-item">
        <span class="metric-label">DOM复用率：</span>
        <span class="metric-value" style="color: #909399; font-weight: bold;">{{ reuseRate }}%</span>
      </div>
    </div>
  </div>
  <div *ngIf="renderTime" style="margin-bottom:12px;color:#e67e22;font-weight:bold;">
    本次渲染耗时：{{ renderTime }} ms<br>
    节点创建：{{ domTrackStats.created }}，复用：{{ domTrackStats.reused }}，销毁：{{ domTrackStats.destroyed }}，复用率：{{ reuseRate }}%
  </div>

  <!-- 用于学术数据测试的纯粹列表，确保能准确捕获created和destroyed -->
  <div *ngIf="showAcademicTestList" class="academic-test-list">
    <!-- <span
      *ngFor="let book of academicBooks; trackBy: trackById"
      [appDomTrack]="keyStrategyService.keyType === 'id' ? book.id : $index"
      [attr.data-id]="book.id"
      style="padding: 5px; border: 1px solid #eee; margin: 2px; display: inline-block;"
    >{{ book.title }}</span> -->
    <span *ngFor="let book of academicBooks; trackBy: trackById" [attr.data-id]="book.id"
      style="padding: 5px; border: 1px solid #eee; margin: 2px; display: inline-block;">{{ book.title }}</span>
  </div>

  <div class="book-list" *ngIf="books.length > 0">

    <div *ngFor="let book of books; trackBy: trackById" class="book-item">
      <div class="book-cover" [style.backgroundColor]="book.coverColor">
        <i nz-icon nzType="read" nzTheme="outline"></i>
      </div>
      <div class="book-info">
        <div class="book-title">{{ book.title }}</div>
        <div class="book-meta">
          <span class="author">{{ book.author }}</span>
          <span class="category">{{ book.category }}</span>
        </div>
        <div class="book-details">
          <span class="isbn">ISBN: {{ book.isbn }}</span>
          <span class="location">位置: {{ book.location }}</span>
        </div>
      </div>
      <div class="stock-info">
        <div class="stock-count">
          <span class="label">库存:</span>
          <span class="count" [ngClass]="getStockClass(book.stock)">{{ book.stock }}</span>
        </div>
        <div class="stock-status">
          <nz-tag nzSize="small" [nzColor]="getStatusType(book.status)">
            {{ book.status }}
          </nz-tag>
        </div>
      </div>
      <div class="operations">
        <div nz-button-group>
          <button nz-button nzSize="small" nzType="primary" (click)="increaseStock(book.id)">
            <i nz-icon nzType="plus"></i>
          </button>
          <button nz-button nzSize="small" nzType="primary" (click)="decreaseStock(book.id)"
            [disabled]="book.stock <= 0">
            <i nz-icon nzType="minus"></i>
          </button>
          <button nz-button nzSize="small" nzType="primary" (click)="removeBook(book.id)">
            <i nz-icon nzType="delete"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="empty-state" *ngIf="books.length === 0">
    <div class="empty-icon">
      <i nz-icon nzType="box-plot" nzTheme="outline"></i>
    </div>
    <h3>库存为空</h3>
    <p>当前没有图书库存记录，点击"初始化库存"开始管理</p>
    <button nz-button nzType="primary" (click)="initStock()" [nzLoading]="loading">
      初始化库存
    </button>
  </div>


</div>